<template>
    <div>
        <el-dialog :title="!index ? '新增' : '修改'" :close-on-click-modal="false"
            :visible.sync="dataVisible" width="60%" v-el-drag-dialog>
            <el-row :span="24">
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
                    <el-form-item label="类型：" :label-width="formLabelWidth" prop="type">
                        <el-radio-group v-model="dataForm.type" disabled>
                            <el-radio label="1">新增</el-radio>
                            <el-radio label="2">修改</el-radio>
                            <el-radio label="3">删除</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-col :span="24">
                        <el-form-item label="物料名称" :label-width="formLabelWidth" prop="classId" class="pop"
                            v-if="dataForm.type != '3'">
                            <el-popover ref="treeListPopover" placement="bottom-start" width="auto" trigger="click"
                                v-model="visible" style="width: 100%;">
                                <template #reference>
                                    <el-input v-model="dataForm.className" @blur="visible = true" :readonly="true"
                                        placeholder="点击选择物料名称" class="menu-list__input" clearable></el-input>
                                </template>
                                <el-tree :data="treeList" :props="treeListTreeProps" node-key="classId" ref="treeListTree"
                                    @current-change="treeListTreeCurrentChangeHandle" :default-expand-all="true"
                                    :highlight-current="true" :expand-on-click-node="false">
                                </el-tree>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料编码：" :label-width="formLabelWidth" prop="pinNum" v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pinNum" placeholder="物料编码" :disabled="dataForm.type == '2'?true:false"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="物料名称：" :label-width="formLabelWidth" prop="name" v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.name" placeholder="物料名称"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="型号规格：" :label-width="formLabelWidth" prop="partNumber"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.partNumber" placeholder="型号规格"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料等级：" :label-width="formLabelWidth" prop="class1" v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.class1" placeholder="物料等级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产厂家：" :label-width="formLabelWidth" prop="manufacture"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.manufacture" placeholder="生产厂家"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产厂家型号(或代码):" :label-width="formLabelWidth" prop="manufacturerModelNumber"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.manufacturerModelNumber" placeholder="生产厂家型号(或代码)"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作温度：" :label-width="formLabelWidth" prop="optTemp"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.optTemp" placeholder="工作温度"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作电压：" :label-width="formLabelWidth" prop="optVoltage"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.optVoltage" placeholder="工作电压"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="封装信息：" :label-width="formLabelWidth" prop="encapsulatedInformation"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.encapsulatedInformation" placeholder="封装信息"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="参数属性：" :label-width="formLabelWidth" prop="paramrAttribute"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.paramrAttribute" placeholder="参数属性"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="类型说明：" :label-width="formLabelWidth" prop="partType"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.partType" placeholder="类型说明"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="管脚数：" :label-width="formLabelWidth" prop="pinCount"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pinCount" placeholder="管脚数"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="pspice_model：" :label-width="formLabelWidth" prop="pspiceModel"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pspiceModel" placeholder="pspice_model"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="元件符号：" :label-width="formLabelWidth" prop="schematicPart"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.schematicPart" placeholder="元件符号"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="值：" :label-width="formLabelWidth" prop="value" v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.value" placeholder="值"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料描述：" :label-width="formLabelWidth" prop="description"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.description" placeholder="物料描述"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="PCB封装：" :label-width="formLabelWidth" prop="pcbFootprint"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pcbFootprint" placeholder="PCB封装"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="规格书：" :label-width="formLabelWidth" prop="datasheetName"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.datasheetName" placeholder="规格书"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="PCB封装：" :label-width="formLabelWidth" prop="pcbFootprint"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pcbFootprint" placeholder="PCB封装"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="元件符号：" :label-width="formLabelWidth" prop="schematicPart"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.schematicPart" placeholder="元件符号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="pspice_model：" :label-width="formLabelWidth" prop="pspiceModel"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pspiceModel" placeholder="pspice_model"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="24">
                        <el-form-item label="规格书:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                            <uploadFile @uploadFile="fileListFun" :fileLists="fileList" num="1"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="PCB封装:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                           <uploadFile @uploadFile="fileList2Fun" :fileLists="fileList2" num="2"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="元件符号:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                           <uploadFile @uploadFile="fileList3Fun" :fileLists="fileList3" num="2"></uploadFile>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="附件上传:" :label-width="formLabelWidth" class="applicaWord">
                            <uploadFile @uploadFile="fileListFun" :fileLists="fileList" num="1"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注:" :label-width="formLabelWidth" prop="remark">
                            <el-input type="textarea" v-model="dataForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="图片" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                            <el-upload :action="urlUpdate" list-type="picture-card" :headers="token" :file-list="fileList4"
                                :on-success="handleSuccess" :on-change="handleChange">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                            <i class="el-icon-zoom-in"></i>
                                        </span>
                                        <span v-if="!disabled" class="el-upload-list__item-delete"
                                            @click="handleDownloadImg(file)">
                                            <i class="el-icon-download"></i>
                                        </span>
                                        <span v-if="!disabled" class="el-upload-list__item-delete"
                                            @click="handleRemoveImg(file)">
                                            <i class="el-icon-delete"></i>
                                        </span>
                                    </span>
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col> -->
                </el-form>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button size="small" @click="dataVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">保存</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
  
<script>
import { treeClassTranslate } from "../../../utils/treeDataTranslate.js";
import uploadFile from './upload.vue';
export default {
    emits: ["refreshDataList"],
    components: {
        uploadFile
    },
    data() {
        return {
            urlUpdate: '',//文件上传路径
            token: {
                token: ''
            },
            isDisabled: false,
            dataVisible: false,
            dialogVisibleImg: false,
            disabled: false,
            dialogImageUrl: '',
            dataForm: {
                class1: '',//物料等级
                classId: "",//目录id
                className: "",//目录名称
                datasheet: '',//规格书路径
                datasheetName: "",//规格书名称
                // description: '',//物料描述
                encapsulatedInformation: '',//封装信息
                footPath: '',//封装路径
                // footRef: '',//封装名称
                libPath: '',//库路径
                // libRef: '',//库文件名
                manufacture: '',//生产厂家
                manufacturerModelNumber:'',//生产厂家型号（或代码）
                name: '',//物料名称

                objectFlowDetailId: '',//
                objectFlowId: '',//
                objectId: '',//

                optTemp: '',//工作温度
                optVoltage: '',//工作电压
                paramrAttribute: '',//参数属性
                partNumber: '',//型号规格
                // partType: '',//类型说明
                pcbFootprint: '',//PCB封装
                pictureurl: '',//预览图片路径
                pinCount: '',//管脚数
                pinNum: '',//品号
                prctureName: '',//图片名称
                pspiceModel: '',//
                remark: '',//备注
                schematicPart: '',//元件符号
                type: '1',//1新增2修改3删除
                // value: '',//值
            },
            dataRule: {
                name: [
                    {
                        required: true,
                        message: "名称不能为空",
                        trigger: "blur",
                    },
                ],
                classId: [
                    {
                        required: true,
                        message: "请选择项目",
                        trigger: "change",
                    },
                ],
                pinNum:[
                    {
                        required: true,
                        message: "名称不能为空",
                        trigger: "blur",
                    },
                ],
                partNumber:[
                    {
                        required: true,
                        message: "型号规格不能为空",
                        trigger: "blur",
                    },
                ],
                manufacture:[
                    {
                        required: true,
                        message: "生产厂家不能为空",
                        trigger: "blur",
                    },
                ],
                manufacturerModelNumber:[
                    {
                        required: true,
                        message: "生产厂家型号(或代码)不能为空",
                        trigger: "blur",
                    },
                ],
                paramrAttribute:[
                    {
                        required: true,
                        message: "参数属性不能为空",
                        trigger: "blur",
                    },
                ],
            },
            //目录
            treeList: [],
            treeListTreeProps: {
                children: "list",
                label: "className",
            },
            formLabelWidth: "170px",
            visible: false,
            fileList: [],//规格书
            fileList2: [],//封装
            fileList3: [],//库
            fileList4: [],//图片
            index: null,
            url: process.env.VUE_APP_BASE_API,
        };
    },
    created() {
        this.urlUpdate = process.env.VUE_APP_BASE_API + '/file/uploadFileInterface'
        this.token.token = sessionStorage.getItem("Token");
    },
    methods: {
        async init(type, index, row) {
            console.log(type)
            this.dataVisible = true
            //获取上级菜单
            await this.Sevice({
                url: "/ad/class/nav",
                method: "get",
            }).then((res) => {
                if (res.code != 200) {
                } else {
                    // this.treeList = treeClassTranslate(res.treeList, 'classId');
                    this.treeList = res.list
                }
            }).catch((error) => {
                console.log(error);
            });
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                this.fileList = []//规格书
                this.fileList2 = []//封装
                this.fileList3 = []//库
                this.fileList4 = []//图片
                this.dataForm.classId = ''
                this.dataForm.className = ''
                // console.log(index)
                this.index = index;
                this.dataForm.type = type;
                // console.log(row)
                this.isDisabled=false
                if (!row) {

                } else {
                    this.dataForm = JSON.parse(JSON.stringify(row))
                    this.dataForm.type = this.dataForm.type.toString()
                    // if (this.dataForm.datasheet) {
                    //     let datasheet = this.dataForm.datasheet.split(',')
                    //     let datasheetName = this.dataForm.datasheetName.split(',')
                    //     let list = []
                    //     for (let i = 0; i < datasheet.length; i++) {
                    //         list.push({ url: datasheet[i], name: datasheetName[i] })
                    //     }
                    //     this.fileList = list
                    // }
                    // if (this.dataForm.footPath) {
                    //     let footPath = this.dataForm.footPath.split(',')
                    //     let pcbFootprint = this.dataForm.pcbFootprint.split(',')
                    //     let list = []
                    //     for (let i = 0; i < footPath.length; i++) {
                    //         list.push({ url: footPath[i], name: pcbFootprint[i] })
                    //     }
                    //     this.fileList2 = list
                    // }
                    // if (this.dataForm.libPath) {
                    //     let libPath = this.dataForm.libPath.split(',')
                    //     let schematicPart = this.dataForm.schematicPart.split(',')
                    //     let list = []
                    //     for (let i = 0; i < libPath.length; i++) {
                    //         list.push({ url: libPath[i], name: schematicPart[i] })
                    //     }
                    //     this.fileList3 = list
                    // }
                    // if (this.dataForm.pspicePath) {
                    //     let pspicePath = this.dataForm.pspicePath.split(',')
                    //     let pspiceModel = this.dataForm.pspiceModel.split(',')
                    //     let list = []
                    //     for (let i = 0; i < pspicePath.length; i++) {
                    //         list.push({ url: pspicePath[i], name: pspiceModel[i] })
                    //     }
                    //     this.fileList4 = list
                    // }
                    // if (this.dataForm.pictureurl) {
                    //     let pictureurl = this.dataForm.pictureurl.split(',')
                    //     let prctureName = this.dataForm.prctureName.split(',')
                    //     let list = []
                    //     for (let i = 0; i < pictureurl.length; i++) {
                    //         list.push({ 
                    //             url:this.url+pictureurl[i], 
                    //             name: prctureName[i],
                    //             response:{
                    //                 map:{
                    //                     fileName: prctureName[i],
                    //                     filePath: pictureurl[i]
                    //                 }
                    //             } 
                    //         })
                    //     }
                    //     this.fileList4 = list
                    // }
                    //     fileList: [],//规格书
                    // fileList2: [],//封装
                    // fileList3: [],//库
                    // fileList4: [],//图片
                    if (this.dataForm.filePaths) {
                        let filePaths = this.dataForm.filePaths.split(',')
                        let fileNames = this.dataForm.fileNames.split(',')
                        let list = []
                        for (let i = 0; i < filePaths.length; i++) {
                            list.push({ url: filePaths[i], name: fileNames[i] })
                        }
                        this.fileList = list
                    }
                }
            });

        },
        // 菜单树选中
        treeListTreeCurrentChangeHandle(data, node) {
            if(data.classParentId!=0){
                this.dataForm.classId = data.classId
            this.dataForm.className = data.className
            this.visible = false
            }
        },
        // 菜单树设置当前选中节点
        treeListTreeSetCurrentNode() {
            this.$refs.treeListTree.setCurrentKey(this.dataForm.classId)
            this.dataForm.className = (this.$refs.treeListTree.getCurrentNode() || {})['className']
        },
        //上传文件
        fileListFun(data) {
            this.fileList = data;
            console.log('1', data)
        },
        fileList2Fun(data) {
            this.fileList2 = data;
            console.log('2', data)
        },
        fileList3Fun(data) {
            this.fileList3 = data;
            console.log('3', data)
        },
        fileList4Fun(data) {
            this.fileList4 = data;
            console.log('4', data)
        },
        // fileList4Fun(data) {
        //     this.fileList4 = data;
        //     console.log('4', data)
        // },
        handleRemoveImg(file) {
            console.log(file, this.fileList4);
            for (let i = 0; i < this.fileList4.length; i++) {
                if (this.fileList4[i].uid == file.uid) {
                    this.fileList4.splice(i, 1);
                }
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = url+file.url;
            this.dialogVisibleImg = true;
        },
        handleDownloadImg(file) {
            this.fileDown(file);
        },
        //附件上传成功回调
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            if (response.code == 200) {
                this.fileList4 = fileList
            } else {
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].uid == file.uid) {
                        fileList.splice(i, 1);
                    }
                }
                this.$message({ message: response.msg, type: 'error', duration: 1000 })
            }
        },
        //上传文件
        handleChange(file, fileList) {
            this.fileList4 = fileList;

        },
        // 表单提交
        async dataFormSubmit() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    this.isDisabled=true
                    //规格书
                    // let datasheet = []
                    // let datasheetName = []
                    // if (this.fileList.length) {
                    //     for (let i = 0; i < this.fileList.length; i++) {
                    //         if (this.fileList[i].response) {
                    //             datasheet.push(this.fileList[i].response.map.filePath)
                    //         } else {
                    //             datasheet.push(this.fileList[i].url)
                    //         }
                    //         datasheetName.push(this.fileList[i].name)
                    //     }
                    // }
                    // this.dataForm.datasheet = datasheet.toString()
                    // this.dataForm.datasheetName = datasheetName.toString()

                    //封装
                    // let footPath = []
                    // let schematicPart = []
                    // if (this.fileList2.length) {
                    //     for (let i = 0; i < this.fileList2.length; i++) {
                    //         if (this.fileList2[i].response) {
                    //             footPath.push(this.fileList2[i].response.map.filePath)
                    //         } else {
                    //             footPath.push(this.fileList2[i].url)
                    //         }
                    //         schematicPart.push(this.fileList2[i].name)
                    //     }
                    // }
                    // this.dataForm.footPath = footPath.toString()
                    // this.dataForm.schematicPart = schematicPart.toString()

                    //库
                    // let libPath = []
                    // let pcbFootprint = []
                    // if (this.fileList3.length) {
                    //     for (let i = 0; i < this.fileList3.length; i++) {
                    //         if (this.fileList3[i].response) {
                    //             libPath.push(this.fileList3[i].response.map.filePath)
                    //         } else {
                    //             libPath.push(this.fileList3[i].url)
                    //         }
                    //         pcbFootprint.push(this.fileList3[i].name)
                    //     }
                    // }
                    // this.dataForm.libPath = libPath.toString()
                    // this.dataForm.pcbFootprint = pcbFootprint.toString()
                    //pspice_model
                    // let pspiceModel = []
                    // let pspicePath = []
                    // if (this.fileList4.length) {
                    //     for (let i = 0; i < this.fileList4.length; i++) {
                    //         if (this.fileList4[i].response) {
                    //             pspicePath.push(this.fileList4[i].response.map.filePath)
                    //         } else {
                    //             pspicePath.push(this.fileList4[i].url)
                    //         }
                    //         pspiceModel.push(this.fileList4[i].name)
                    //     }
                    // }
                    // this.dataForm.pspiceModel = pspiceModel.toString()
                    // this.dataForm.pspicePath = pspicePath.toString()

                    //图片
                    // let pictureurl = []
                    // let prctureName = []
                    // console.log(this.fileList4)
                    // if (this.fileList4.length) {
                    //     for (let i = 0; i < this.fileList4.length; i++) {
                    //         if (this.fileList4[i].response) {
                    //             pictureurl.push(this.fileList4[i].response.map.filePath)
                    //         } else {
                    //             pictureurl.push(this.fileList4[i].url)
                    //         }
                    //         prctureName.push(this.fileList4[i].name)
                    //     }
                    // }
                    // this.dataForm.pictureurl = pictureurl.toString()
                    // this.dataForm.prctureName = prctureName.toString()
                    //上传附件
                    let filePaths = []
                    let fileNames = []
                    if (this.fileList.length) {
                        for (let i = 0; i < this.fileList.length; i++) {
                            if (this.fileList[i].response) {
                                filePaths.push(this.fileList[i].response.map.filePath)
                            } else {
                                filePaths.push(this.fileList[i].url)
                            }
                            fileNames.push(this.fileList[i].name)
                        }
                    }
                    this.dataForm.filePaths = filePaths.toString()
                    this.dataForm.fileNames = fileNames.toString()
                    let data = { index: this.index, data: JSON.parse(JSON.stringify(this.dataForm)) }
                    this.$emit('dataForm', data)
                    this.dataVisible = false
                    
                }
            });
        },
    },
};
</script>
  
<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
    cursor: pointer;
}

.mod-menu__icon-popover {
    width: 458px;
    overflow: hidden;
}

.mod-menu__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mod-menu__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
    padding: 8px;
    margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mod-menu .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
}

.el-tree {
    height: 200px;
    overflow-y: auto;
}
</style>
  